<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>jindo.DragArea - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class=""><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="selected">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


	
<div class="snb depth2 scrollbar">
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<h3 class="blind">jindo.DragArea 클래스</h3>
			<div class="smanuals">
		
				<h3>보기 옵션</h3>
				<ul class="api-options">
					<li class="api-show-inherited">
						<span id="checkbox-inherited">
							<span class="checkbox-mark checkbox-checked"></span>
							<input type="checkbox" id="api-show-inherited">
						</span><label for="api-show-inherited">상속받은 항목</label>

					</li>
					<li class="api-show-deprecated">
						<span id="checkbox-deprecated">
							<span class="checkbox-mark"></span>
							<input type="checkbox" id="api-show-deprecated">
						</span><label for="api-show-deprecated">폐지예정 항목</label>
					</li>
				</ul>
	
		        
		            <h3><a href="#manual">매뉴얼</a></h3>
		
		            <ul class="manuals">
		                
		                    <li class="manual">
		                        <a href="#manual_6a586bd6ae227a6ba2d98c96e8b06af1">기능과 동작 방식</a>
		                    </li>
		                
		                    <li class="manual">
		                        <a href="#manual_cbd30bb38edc7ffc879aabd5f479a2c7">기본 초기화 형태</a>
		                    </li>
		                
		            </ul>
		        

		        
		            <h3><a href="#demo">데모</a></h3>
		        
		
		        
		            <h3><a href="#constructor">생성자</a></h3>
		
		            <ul class="constructors extends">
		                
		                    <li class="">
		                        <a href="#constructor_jindo.DragArea">
		                            DragArea
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
				
		        
		
		        
		            <h3><a href="#method">메서드</a></h3>
		
		            <ul class="methods extends">
		                
		                    <li class=" inherited-item">
		                        <a href="#method_activate" title="컴포넌트를&nbsp;활성화한다.
_onActivate&nbsp;메서드를&nbsp;수행하므로&nbsp;반드시&nbsp;상속받는&nbsp;클래스에&nbsp;_onActivate&nbsp;메서드가&nbsp;정의되어야한다.">
		                            activate()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_attach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;등록한다.">
		                            attach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" deprecated-item">
		                        <a href="#method_attachEvent" title="이벤트를&nbsp;attach한다.">
		                            attachEvent()
		                            <span class="flag deprecated" title="deprecated"><span class="blind">deprecated</span></span>
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_deactivate" title="컴포넌트를&nbsp;비활성화한다.
_onDeactivate&nbsp;메서드를&nbsp;수행하므로&nbsp;반드시&nbsp;상속받는&nbsp;클래스에&nbsp;_onDeactivate&nbsp;메서드가&nbsp;정의되어야한다.">
		                            deactivate()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_detach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_detachAll" title="등록된&nbsp;모든&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detachAll()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" deprecated-item">
		                        <a href="#method_detachEvent" title="이벤트를&nbsp;detach한다.">
		                            detachEvent()
		                            <span class="flag deprecated" title="deprecated"><span class="blind">deprecated</span></span>
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_fireEvent" title="이벤트를&nbsp;발생시킨다.">
		                            fireEvent()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_isActivating" title="컴포넌트의&nbsp;활성여부를&nbsp;가져온다.">
		                            isActivating()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_isDragging" title="레이어가&nbsp;현재&nbsp;드래그&nbsp;되고&nbsp;있는지&nbsp;여부를&nbsp;가져온다.">
		                            isDragging()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" deprecated-item">
		                        <a href="#method_isEventAttached" title="이벤트의&nbsp;attach&nbsp;여부를&nbsp;가져온다.">
		                            isEventAttached()
		                            <span class="flag deprecated" title="deprecated"><span class="blind">deprecated</span></span>
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_option" title="옵션&nbsp;값을&nbsp;가져온다.">
		                            option()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_optionSetter" title="옵션의&nbsp;setter&nbsp;함수를&nbsp;가져온다.&nbsp;
옵션의&nbsp;setter&nbsp;함수는&nbsp;지정된&nbsp;옵션이&nbsp;변경되면&nbsp;수행되는&nbsp;함수이다.">
		                            optionSetter()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_startDragging" title="마우스다운이벤트와&nbsp;관계없이&nbsp;지정된&nbsp;엘리먼트를&nbsp;드래그&nbsp;시작한다.">
		                            startDragging()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_stopDragging" title="드래그를&nbsp;강제&nbsp;종료시킨다.">
		                            stopDragging()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
		
		        
		
		        
		            <h3><a href="#event">이벤트</a></h3>
		
		            <ul class="events extends">
		                
		                    <li class="">
		                        <a href="#event_beforeDrag" title="드래그가&nbsp;시작되고&nbsp;엘리먼트가&nbsp;이동되기&nbsp;직전에&nbsp;발생&nbsp;(이동중&nbsp;beforedrag,&nbsp;drag&nbsp;순으로&nbsp;연속적으로&nbsp;발생)">
		                            beforeDrag
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_drag" title="드래그&nbsp;엘리먼트가&nbsp;이동하는&nbsp;중에&nbsp;발생&nbsp;(이동중&nbsp;beforedrag,&nbsp;drag&nbsp;순으로&nbsp;연속적으로&nbsp;발생)">
		                            drag
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_dragEnd" title="드래그(엘리먼트&nbsp;이동)가&nbsp;완료된&nbsp;후에&nbsp;발생&nbsp;(mouseup시&nbsp;1회&nbsp;발생.&nbsp;뒤이어&nbsp;handleup&nbsp;발생)">
		                            dragEnd
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_dragStart" title="드래그가&nbsp;시작될&nbsp;때&nbsp;발생&nbsp;(마우스&nbsp;클릭&nbsp;후&nbsp;첫&nbsp;움직일&nbsp;때&nbsp;한&nbsp;번)">
		                            dragStart
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_handleDown" title="드래그될&nbsp;handle&nbsp;에&nbsp;마우스가&nbsp;클릭되었을&nbsp;때&nbsp;발생">
		                            handleDown
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_handleUp" title="드래그된&nbsp;handle에&nbsp;마우스&nbsp;클릭이&nbsp;해제됬을&nbsp;때&nbsp;발생">
		                            handleUp
		                            
		                            
		                        </a>   
		                    </li>
		                
		            </ul>
		        
		
		        
	
			</div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>

<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				
<!-- content -->
<div class="content">
	<h1 class="blind">
		DragArea
	</h1>

	<div class="tc-panel first">
		<dl class="relation">
		<dt>클래스</dt>
		<dd>jindo.DragArea
		    
	        
			<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l7" title="view source code"><span class="blind">소스코드</span></a></span>
		</dd>

	    
	        <dt>상속</dt>
	        <dd>
	        	<a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a>
	        	<span class="arrow">→</span><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
	        </dd>
	    

	    
		
	    
		
	    
		
		</dl>

		
		
		<div class="description"><p>HTML Element를 Drag할 수 있게 해주는 컴포넌트
DragArea 컴포넌트는 상위 기준 엘리먼트의 자식들 중 특정 클래스명을 가진 모든 엘리먼트를 Drag 가능하게 하는 기능을 한다.</p></div>
		
		

	    
	    
		<div class="qr_code">
			<strong>QR code</strong>
		
			<div id="QRView">
			<script type="text/javascript">

				document.write([
					'<img src="http://chart.apis.google.com/chart?cht=qr&chs=220x220&chl=',
					encodeURIComponent(location.href.replace(/#.*$/, '')),
					'&choe=UTF-8" />'
				].join(''));

			</script>
			</div>
		</div>	    
	    
		
	</div>

	<div class="tc-panel panel">

        
			<h2 class="noline">생성자</h2>
			
			<table class="tbl_board">
			<caption class="hide">생성자</caption>
			<colgroup>
			<col style="width:22px">
			<col />
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">생성자</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#constructor_jindo.DragArea" class="name">jindo.DragArea</a>
(el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>, [htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])
 
						<p><p>DragArea 컴포넌트를 생성한다.</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
			</tbody>
			</table>
		

        

        
			<h2 class="noline">메서드</h2>
			
			<table class="tbl_board">
			<caption class="hide">메서드</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">메서드</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_activate" class="name">activate</a>
( )
:<a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>컴포넌트를 활성화한다.
_onActivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onActivate 메서드가 정의되어야한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_attach" class="name">attach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>커스텀 이벤트 핸들러를 등록한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class="deprecated-item ">
					<td class="type">
				        
				        	<span title="activate()&nbsp;사용권장" class="flag deprecate"><span class="blind">deprecated</span></span>
				        
				        
					</td>
					<td>
						<a href="#method_attachEvent" class="name">attachEvent</a>
( )
 
<span title="deprecated" class="flag deprecated"><span class="blind">deprecated</span></span>
						<p><p>이벤트를 attach한다.</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_deactivate" class="name">deactivate</a>
( )
:<a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>컴포넌트를 비활성화한다.
_onDeactivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onDeactivate 메서드가 정의되어야한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_detach" class="name">detach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_detachAll" class="name">detachAll</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class="deprecated-item ">
					<td class="type">
				        
				        	<span title="deactivate()&nbsp;사용권장" class="flag deprecate"><span class="blind">deprecated</span></span>
				        
				        
					</td>
					<td>
						<a href="#method_detachEvent" class="name">detachEvent</a>
( )
 
<span title="deprecated" class="flag deprecated"><span class="blind">deprecated</span></span>
						<p><p>이벤트를 detach한다.</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_fireEvent" class="name">fireEvent</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>이벤트를 발생시킨다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_isActivating" class="name">isActivating</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>컴포넌트의 활성여부를 가져온다.</p></p>
					</td>
					<td><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_isDragging" class="name">isDragging</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
						<p><p>레이어가 현재 드래그 되고 있는지 여부를 가져온다.</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
					<tr class="deprecated-item ">
					<td class="type">
				        
				        	<span title="isActivating()&nbsp;사용권장" class="flag deprecate"><span class="blind">deprecated</span></span>
				        
				        
					</td>
					<td>
						<a href="#method_isEventAttached" class="name">isEventAttached</a>
( )
 
<span title="deprecated" class="flag deprecated"><span class="blind">deprecated</span></span>
						<p><p>이벤트의 attach 여부를 가져온다.</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_option" class="name">option</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>옵션 값을 가져온다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_optionSetter" class="name">optionSetter</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_startDragging" class="name">startDragging</a>
(el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
						<p><p>마우스다운이벤트와 관계없이 지정된 엘리먼트를 드래그 시작한다.</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_stopDragging" class="name">stopDragging</a>
( )
:<a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>드래그를 강제 종료시킨다.</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
			</tbody>
			</table>
        

        
			<h2 class="noline">이벤트</h2>
			
			<table class="tbl_board">
			<caption class="hide">이벤트</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">이벤트</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_beforeDrag" class="name">beforeDrag</a>
						<p><p>드래그가 시작되고 엘리먼트가 이동되기 직전에 발생 (이동중 beforedrag, drag 순으로 연속적으로 발생)</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_drag" class="name">drag</a>
						<p><p>드래그 엘리먼트가 이동하는 중에 발생 (이동중 beforedrag, drag 순으로 연속적으로 발생)</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_dragEnd" class="name">dragEnd</a>
						<p><p>드래그(엘리먼트 이동)가 완료된 후에 발생 (mouseup시 1회 발생. 뒤이어 handleup 발생)</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_dragStart" class="name">dragStart</a>
						<p><p>드래그가 시작될 때 발생 (마우스 클릭 후 첫 움직일 때 한 번)</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_handleDown" class="name">handleDown</a>
						<p><p>드래그될 handle 에 마우스가 클릭되었을 때 발생</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_handleUp" class="name">handleUp</a>
						<p><p>드래그된 handle에 마우스 클릭이 해제됬을 때 발생</p></p>
					</td>
					<td>jindo.DragArea</td>
					</tr>
	            
			</tbody>
			</table>
        			
	</div>

    
        <div class="tc-panel">
			<h2 id="manual">매뉴얼</h2>
            
				<div id="manual_6a586bd6ae227a6ba2d98c96e8b06af1" class="manual item">
				    <h3>기능과 동작 방식</h3>
				    <div class="description"><p>드래그 기능은 일반적으로 레이어라고 일컫는 영역을 마우스로 이동 가능하게 만드는 것을 말하고, DragArea 컴포넌트는 특정 영역 하위에 포함된 여러 요소들을 드래그 가능하도록 만든다. 일단 기본적인 동작확인을 위해 예제부터 작성해보자.</p>

<h4>드래그할 영역 정하기</h4>

<p>이제 HTML body 영역에 드래그할 임의의 div 태그를 삽입한다. DragArea 컴포넌트는 기본값으로 'draggable' 이라는 클래스 이름이 지정된 모든 태그를 드래그 가능하도록 만든다.</p>

<pre class="code"><code class="prettyprint">&lt;div class="dragarea"&gt;
    &lt;div class="draggable"&gt;Drag me&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<h4>인스턴스 생성하기</h4>

<p>초기화 옵션값을 재지정 할 수 있지만, 일단 컴포넌트에 지정된 기본값을 그대로 사용해 인스턴스를 생성한다.</p>

<pre class="code"><code class="prettyprint">var oDragArea = new jindo.DragArea(document);
</code></pre>

<h4>상위 영역을 벗어날 수 없도록 설정하기</h4>

<p>옵션 bFlowOut의 디폴트 값은 true이다. 이 값을 false로 지정해 상위 영역을 벗어나 드래드될 수 없도록 설정할 수 있다.</p>

<pre class="code"><code class="prettyprint">var oDragArea = new jindo.DragArea(jindo.$("dragarea"), { bFlowOut : false });
</code></pre>

<h4>일정 범위 이상 잡고 끌어야 드래그되도록 설정하기</h4>

<p>DragArea는 마우스 버튼이 클릭된채로 1픽셀이라도 움직이게 되는 경우 드래그를 시작하게 된다. 사용자는 단순히 클릭을 하였는데 DragArea가 민감하게 반응하여 원했던 동작이 아닌 드래그가 되어버리는 경우가 발생할 수 있다. 이런 경우를 방지하기 위해 nThreshold값을 지정하여 일정 픽셀 이상 움직여야 드래그가 시작되도록 지정할 수 있다.</p>

<pre class="code"><code class="prettyprint">var oDragArea = new jindo.DragArea(jindo.$("dragarea"), { nThreshold : 10 });
</code></pre>

<h4>jindo.DragArea의 커스텀 이벤트</h4>

<p>jindo.DragArea의 커스텀 이벤트를 활용하면 다양한 드래그형태를 구현할 수 있다. 가령, 드래그 중일때 마우스 커서 모양을 변경한다든지, 윈도우 창처럼 드래그 되는 제목표시줄 영역을 따로 만드는 등의 초기화 옵션으로 제어할수 없는 기능들을 제어할 수 있게된다.</p>

<h4>커스텀이벤트 발생 순서</h4>

<p>DragArea 컴포넌트는 아래 그림에서 보듯이 총 6가지 커스텀 이벤트를 순차적으로 발생시킨다. handleDown과 handleUp 이벤트는 실제로 드래깅이 시작되었는지와 관계없이 발생하기 때문에, 실제 드래깅이 일어날때 처리하기엔 적합하지 않다. 반면, dragStart-beforeDrag-drag-dragEnd는 실제로 드래깅이 시작되어 종료될때까지 발생하는 이벤트이다. 특히 beforeDrag와 drag 이벤트는 드래그 이동 중에 계속해서 발생하기 때문에, 이 시점에 복잡한 계산을 구현 한다면 성능문제를 일으킬 수 있기때문에 주의해야한다. </p>

<p><img src="..\..\..\resource/jindo.DragArea/CustomEvent.png" alt="" title="" /></p>

<p>초기화 옵션중 nThreshold 값을 경계로 DragArea 컴포넌트는 dragStart 이벤트를 발생시킨다.</p>

<h4>서로 다른 역할을 하는 드래깅 엘리먼트 elArea, elDrag, elHandle</h4>

<p>이벤트 발생 시점과 더불어 반드시 이해 해야할것은 바로 3가지 서로 다른 역할을 하는 엘리먼트들이다. 아래 그림의 elArea와 elHandle 그리고 elDrag가 있다. 이 3가지 엘리먼트들은 커스텀 이벤트 핸들러에 객체형태로 넘겨받기 때문에 반드시 쓰임에 맞게 구분하여 사용해야한다.</p>

<p><img src="..\..\..\resource/jindo.DragArea/Basic.png" alt="" title="" /></p>

<ul>
<li>먼저 elArea는 컴포넌트 초기화시, 첫번째 인자로 넘겨받는 필수 인자로써, Drag 될 엘리먼트의 상위 엘리먼트를 의미한다. 즉, 이 영역의 자식 엘리먼트 중 특정 클래스(draggable)로 지정된 모든 엘리먼트들은 드래그된다.</li>
<li>두번째로, elHandle 은 초기화 옵션의 className으로 지정된 드래그될 핸들을 의미한다. 하지만, 실제 드래그 되는 엘리먼트와 다를 수 있다.</li>
<li>마지막으로, elDrag 는 실제로 드래그 되는 엘리먼트를 나타낸다. 특별히 다른 엘리먼트로 지정하지 않으면, elHandle과 동일하다.</li>
</ul>

<p>커스텀 이벤트들을 핸들링하는 예제는 제공되는 데모페이지와 아래 표를 참고하자</p></div>
				</div>
            
				<div id="manual_cbd30bb38edc7ffc879aabd5f479a2c7" class="manual item">
				    <h3>기본 초기화 형태</h3>
				    <div class="description"><h4>HTML</h4>

<pre class="code"><code class="prettyprint">&lt;div class="dragarea"&gt;
    &lt;div class="draggable"&gt;Drag me&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>드래그할 영역에 'draggable' 이라는 클래스 이름을 지정해준다. 'draggable' 이라는 이름은 컴포넌트 초기화시 옵션(sClassName)을 이용해 다른 이름으로 변경 가능하다.</p>

<h4>CSS</h4>

<pre class="code"><code class="prettyprint">.dragarea { width:400px; height:200px; left:50px; top:50px; padding:10px; border: solid 4px #444; position:absolute;}
.draggable { position:absolute; width:50px; height:50px; background-color:#ccc; left:50px; top:50px; padding:10px; border:1px solid #000; cursor:move; }
</code></pre>

<p>드래그될 엘리먼트는 css position값이 absolute이어야 한다.</p>

<h4>Javascript</h4>

<pre class="code"><code class="prettyprint">var oDragArea = new jindo.DragArea(document);
</code></pre>

<p>document 하위에 존재하는 모든 draggable 요소를 드래그 할수있도록 만든다.</p></div>
				</div>
            
        </div>
    

	
		<div class="tc-panel">
			<h2 id="constructor">생성자 세부 정보</h2>
	        
	            <div id="constructor_jindo.DragArea" class="constructor item">
	<h3>jindo.DragArea()
		<span>생성자</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l19" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>new jindo.DragArea
(el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>, [htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])</code></div>
	<div class="description"><p>DragArea 컴포넌트를 생성한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">el</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">Drag될 엘리먼트들의 상위 기준 엘리먼트. 컴포넌트가 적용되는 영역(Area)이 된다.</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name optional">htOption</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">옵션 객체</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name optional">sClassName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(기본값 : &quot;draggable&quot;)</span>
    

    

    <p class="description">드래그 될 엘리먼트의 클래스명. 상위 기준 엘리먼트의 자식 중 해당 클래스명을 가진 모든 엘리먼트는 드래그가능하게 된다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">bFlowOut</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
        <span class="default">(기본값 : true)</span>
    

    

    <p class="description">드래그될 엘리먼트가 상위 기준 엘리먼트의 영역을 벗어날 수 있는지의 여부. 상위 엘리먼트의 크기가 드래그되는 객체보다 크거나 같아야지만 동작한다. 작은 경우 document사이즈로 제한한다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">bSetCapture</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
        <span class="default">(기본값 : true)</span>
    

    

    <p class="description">ie에서 setCapture() 명령 사용여부</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name optional">nThreshold</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 0)</span>
    

    

    <p class="description">드래그가 시작되기 위한 최소 역치 값(px)</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">var oDragArea = new jindo.DragArea(document, {
    "sClassName" : 'dragable', // (String) 상위 기준 엘리먼트의 자식 중 해당 클래스명을 가진 모든 엘리먼트는 Drag 가능하게 된다. 
    "bFlowOut" : true, // (Boolean) 드래그될 엘리먼트가 상위 기준 엘리먼트의 영역을 벗어날 수 있는지의 여부. 상위 엘리먼트의 크기가 드래그되는 객체보다 크거나 같아야지만 동작하도록 수정. 작은 경우 document사이즈로 제한한다.
    "bSetCapture" : true, //ie에서 setCapture 사용여부
    "nThreshold" : 0 // (Number) 드래그가 시작되기 위한 최소 역치 값(px) 
}).attach({
    handleDown : function(oCustomEvent) {
        //드래그될 handle 에 마우스가 클릭되었을 때 발생
        //전달되는 이벤트 객체 oCustomEvent = {
        //  elHandle : (HTMLElement) 옵션의 className으로 설정된 드래그 될 핸들 엘리먼트 (mousedown된 엘리먼트)
        //  elDrag : (HTMLElement) 실제로 드래그 될 엘리먼트 (핸들을 드래그하여 레이어 전체를 드래그되도록 하고 싶으면 이 값을 설정한다. 아래 예제코드 참고)
        //  weEvent : (jindo.$Event) mousedown시 발생되는 jindo.$Event 객체
        //};
        //oCustomEvent.stop(); 이 수행되면 dragStart 이벤트가 발생하지 않고 중단된다.
    },
    dragStart : function(oCustomEvent) {
        //드래그가 시작될 때 발생 (마우스 클릭 후 첫 움직일 때 한 번)
        //전달되는 이벤트 객체 oCustomEvent = {
        //  elArea : (HTMLElement) 기준 엘리먼트
        //  elHandle : (HTMLElement) 옵션의 className으로 설정된 드래그 될 핸들 엘리먼트 (mousedown된 엘리먼트)
        //  elDrag : (HTMLElement) 실제로 드래그 될 엘리먼트 (핸들을 드래그하여 레이어 전체를 드래그되도록 하고 싶으면 이 값을 설정한다. 아래 예제코드 참고)
        //  htDiff : (HashTable) handledown된 좌표와 dragstart된 좌표의 차이 htDiff.nPageX, htDiff.nPageY
        //  weEvent : (jindo.$Event) 마우스 이동 중 (mousemove) 발생되는 jindo.$Event 객체
        //};
        //oCustomEvent.stop(); 이 수행되면 뒤따르는 beforedrag 이벤트가 발생하지 않고 중단된다.
    },
    beforeDrag : function(oCustomEvent) {
        //드래그가 시작되고 엘리먼트가 이동되기 직전에 발생 (이동중 beforedrag, drag 순으로 연속적으로 발생)
        //전달되는 이벤트 객체 oCustomEvent = {
        //  elArea : (HTMLElement) 기준 엘리먼트
        //  elFlowOut : (HTMLElement) bFlowOut 옵션이 적용될 상위 기준 엘리먼트 (변경가능)
        //  elHandle : (HTMLElement) 옵션의 className으로 설정된 드래그 될 핸들 엘리먼트 (mousedown된 엘리먼트)
        //  elDrag : (HTMLElement) 실제로 드래그 될 엘리먼트
        //  weEvent : (jindo.$Event) 마우스 이동 중 (mousemove) 발생되는 jindo.$Event 객체
        //  nX : (Number) 드래그 될 x좌표. 이 좌표로 엘리먼트가 이동 된다.
        //  nY : (Number) 드래그 될 y좌표. 이 좌표로 엘리먼트가 이동 된다.
        //  nGapX : (Number) 드래그가 시작된 x좌표와의 차이
        //  nGapY : (Number) 드래그가 시작된 y좌표와의 차이
        //};
        //oCustomEvent.stop(); 이 수행되면 뒤따르는 drag 이벤트가 발생하지 않고 중단된다.
        //oCustomEvent.nX = null; // 가로로는 안 움직이게
        //oCustomEvent.nX = Math.round(oCustomEvent.nX / 20) * 20;
        //oCustomEvent.nY = Math.round(oCustomEvent.nY / 20) * 20;
        //if (oCustomEvent.nX &lt; 0) oCustomEvent.nX = 0;
        //if (oCustomEvent.nY &lt; 0) oCustomEvent.nY = 0;
    },
    drag : function(oCustomEvent) {
        //드래그 엘리먼트가 이동하는 중에 발생 (이동중 beforedrag, drag 순으로 연속적으로 발생)
        //전달되는 이벤트 객체 oCustomEvent = {
        //  elArea : (HTMLElement) 기준 엘리먼트
        //  elHandle : (HTMLElement) 옵션의 className으로 설정된 드래그 될 핸들 엘리먼트 (mousedown된 엘리먼트)
        //  elDrag : (HTMLElement) 실제로 드래그 될 엘리먼트
        //  weEvent : (jindo.$Event) 마우스 이동 중 (mousemove) 발생되는 jindo.$Event 객체
        //  nX : (Number) 드래그 된 x좌표. 이 좌표로 엘리먼트가 이동 된다.
        //  nY : (Number) 드래그 된 y좌표. 이 좌표로 엘리먼트가 이동 된다.
        //  nGapX : (Number) 드래그가 시작된 x좌표와의 차이
        //  nGapY : (Number) 드래그가 시작된 y좌표와의 차이
        //};
    },
    dragEnd : function(oCustomEvent) {
        //드래그(엘리먼트 이동)가 완료된 후에 발생 (mouseup시 1회 발생. 뒤이어 handleup 발생)
        //전달되는 이벤트 객체 oCustomEvent = {
        //  elArea : (HTMLElement) 기준 엘리먼트
        //  elHandle : (HTMLElement) 옵션의 className으로 설정된 드래그 될 핸들 엘리먼트 (mousedown된 엘리먼트)
        //  elDrag : (HTMLElement) 실제로 드래그 된 엘리먼트
        //  bInterupted : (Boolean) 드래그중 stopDragging() 호출로 강제적으로 드래그가 종료되었는지의 여부
        //  nX : (Number) 드래그 된 x좌표.
        //  nY : (Number) 드래그 된 y좌표.
        //}
    },
    handleUp : function(oCustomEvent) {
        //드래그된 handle에 마우스 클릭이 해제됬을 때 발생
        //전달되는 이벤트 객체 oCustomEvent = {
        //  elHandle : (HTMLElement) 옵션의 className으로 설정된 드래그 된 핸들 엘리먼트 (mousedown된 엘리먼트)
        //  elDrag : (HTMLElement) 실제로 드래그 된 엘리먼트
        //  weEvent : (jindo.$Event) mouseup시 발생되는 jindo.$Event 객체 
        //};
    }
});
</code></pre>
            </div>
        </div>
    
    
    
    
    

    

</div>

<!--
	
-->
	        
	    </div>
    

	
	
	
		<div class="tc-panel">
			<h2 id="method">메서드 세부 정보</h2>
	        
	            
<div id="method_activate" class="method item inherited-item">
	<h3>activate()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.UIComponent.js.html#l33" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>activate
( )
:<a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></code></div>
	<div class="description"><p>컴포넌트를 활성화한다.
_onActivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onActivate 메서드가 정의되어야한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_attach" class="method item inherited-item">
	<h3>attach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l253" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>attach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 등록한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">fHandlerToAttach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 할 커스텀 이벤트 핸들러</p>

	
	
    
        <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">oCustomEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 객체</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 등록 방법 예제
//아래처럼 등록하면 appear 라는 사용자 이벤트 핸들러는 총 3개가 등록되어 해당 이벤트를 발생시키면 각각의 핸들러 함수가 모두 실행됨.
//attach 을 통해 등록할때는 이벤트명에 'on' 이 빠지는 것에 유의.
function fpHandler1(oEvent) { .... };
function fpHandler2(oEvent) { .... };

var oInst = new MyComponent();
oInst.onappear = fpHandler1; // 직접 등록
oInst.attach('appear', fpHandler1); // attach 함수를 통해 등록
oInst.attach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_attachEvent" class="method item deprecated-item">
	<h3>attachEvent()
		<span>메서드</span>
        
            <span class="flag deprecated" title="activate()&nbsp;사용권장"><span class="blind">deprecated</span></span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l250" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>attachEvent
( )</code></div>
	<div class="description"><p>이벤트를 attach한다.</p></div>

	
	
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_deactivate" class="method item inherited-item">
	<h3>deactivate()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.UIComponent.js.html#l55" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>deactivate
( )
:<a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></code></div>
	<div class="description"><p>컴포넌트를 비활성화한다.
_onDeactivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onDeactivate 메서드가 정의되어야한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detach" class="method item inherited-item">
	<h3>detach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l297" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">fHandlerToDetach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 해제 할 커스텀 이벤트 핸들러</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 해제 예제
oInst.onappear = null; // 직접 해제
oInst.detach('appear', fpHandler1); // detach 함수를 통해 해제
oInst.detach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detachAll" class="method item inherited-item">
	<h3>detachAll()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l335" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detachAll
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></code></div>
	<div class="description"><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">이벤트명. 생략시 모든 등록된 커스텀 이벤트 핸들러를 해제한다.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//"show" 커스텀 이벤트 핸들러 모두 해제
oInst.detachAll("show");

//모든 커스텀 이벤트 핸들러 해제
oInst.detachAll();
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detachEvent" class="method item deprecated-item">
	<h3>detachEvent()
		<span>메서드</span>
        
            <span class="flag deprecated" title="deactivate()&nbsp;사용권장"><span class="blind">deprecated</span></span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l260" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detachEvent
( )</code></div>
	<div class="description"><p>이벤트를 detach한다.</p></div>

	
	
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_fireEvent" class="method item inherited-item">
	<h3>fireEvent()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l180" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>fireEvent
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>이벤트를 발생시킨다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">oEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 핸들러에 전달되는 객체.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	<p class="description">핸들러의 커스텀 이벤트객체에서 stop메서드가 수행되면 false를 리턴</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//커스텀 이벤트를 발생시키는 예제
var MyComponent = jindo.$Class({
    method : function() {
        this.fireEvent('happened', {
            sHello : 'world',
            nAbc : 123
        });
    }
}).extend(jindo.Component);

var oInst = new MyComponent().attach({
    happened : function(oCustomEvent) {
        alert(oCustomEvent.sHello + '/' + oCustomEvent.nAbc); // 결과 : world/123
    }
});

&lt;button onclick="oInst.method();"&gt;Click me&lt;/button&gt; 
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_isActivating" class="method item inherited-item">
	<h3>isActivating()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.UIComponent.js.html#l23" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>isActivating
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>컴포넌트의 활성여부를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_isDragging" class="method item">
	<h3>isDragging()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l165" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>isDragging
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>레이어가 현재 드래그 되고 있는지 여부를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	<p class="description">레이어가 현재 드래그 되고 있는지 여부</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_isEventAttached" class="method item deprecated-item">
	<h3>isEventAttached()
		<span>메서드</span>
        
            <span class="flag deprecated" title="isActivating()&nbsp;사용권장"><span class="blind">deprecated</span></span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l270" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>isEventAttached
( )</code></div>
	<div class="description"><p>이벤트의 attach 여부를 가져온다.</p></div>

	
	
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_option" class="method item inherited-item">
	<h3>option()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l33" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>option
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></code></div>
	<div class="description"><p>옵션 값을 가져온다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">옵션의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></span>
	<p class="description">옵션의 값</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_optionSetter" class="method item inherited-item">
	<h3>optionSetter()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l126" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>optionSetter
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></code></div>
	<div class="description"><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">setter의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
	<p class="description">setter 함수</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_startDragging" class="method item">
	<h3>startDragging()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l280" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>startDragging
(el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>마우스다운이벤트와 관계없이 지정된 엘리먼트를 드래그 시작한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">el</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">드래그할 엘리먼트</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	<p class="description">드래그시작여부</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_stopDragging" class="method item">
	<h3>stopDragging()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l176" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>stopDragging
( )
:<a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></code></div>
	<div class="description"><p>드래그를 강제 종료시킨다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DragArea.html" class="crosslink">jindo.DragArea</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	    </div>
    
	
	
		<div class="tc-panel">
			<h2 id="event">이벤트 세부 정보</h2>
	        
	            <div id="event_beforeDrag" class="event item">
	<h3>beforeDrag
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l451" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>드래그가 시작되고 엘리먼트가 이동되기 직전에 발생 (이동중 beforedrag, drag 순으로 연속적으로 발생)</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elArea</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">기준 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elFlowOut</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">bFlowOut 옵션이 적용될 상위 기준 엘리먼트 (변경가능)</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elHandle</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">옵션의 className으로 설정된 드래그 될 핸들 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrag</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">실제로 드래그 될 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nX</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드래그 될 x좌표. 이 좌표로 엘리먼트가 이동 된다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nY</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드래그 될 y좌표. 이 좌표로 엘리먼트가 이동 된다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nGapX</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드래그가 시작된 x좌표와의 차이</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nGapY</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드래그가 시작된 y좌표와의 차이</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">weEvent</code>
        <span class="type">: jindo.$Event</span>
    

    

    <p class="description">mousedown시 발생되는 jindo.$Event 객체</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">stop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">drag 이벤트를 발생시키지 않고 중단시킬때 호출</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oDragArea.attach("beforeDrag", function(oCustomEvent) {
    // 뒤따르는 drag 이벤트가 발생하지 않고 중단하고 싶은 경우
    oCustomEvent.stop();

    // 가로로는 안 움직이게 않게 할 경우
    oCustomEvent.nX = null;

    // Grid 좌표로 이동하게 할 경우
    oCustomEvent.nX = Math.round(oCustomEvent.nX / 20) * 20;
    oCustomEvent.nY = Math.round(oCustomEvent.nY / 20) * 20;

    if(oCustomEvent.nX &lt; 0){
        oCustomEvent.nX = 0;
    }

    if(oCustomEvent.nY &lt; 0){
        oCustomEvent.nY = 0;
    }
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_drag" class="event item">
	<h3>drag
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l540" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>드래그 엘리먼트가 이동하는 중에 발생 (이동중 beforedrag, drag 순으로 연속적으로 발생)</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elArea</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">기준 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elHandle</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">옵션의 className으로 설정된 드래그 될 핸들 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrag</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">실제로 드래그 될 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nX</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드래그 된 x좌표.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nY</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드래그 된 y좌표.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nGapX</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드래그가 시작된 x좌표와의 차이</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nGapY</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드래그가 시작된 y좌표와의 차이</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">weEvent</code>
        <span class="type">: jindo.$Event</span>
    

    

    <p class="description">mousedown시 발생되는 jindo.$Event 객체</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//커스텀 이벤트 핸들링 예제
oDragArea.attach("drag", function(oCustomEvent) {
    //~~
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_dragEnd" class="event item">
	<h3>dragEnd
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l204" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>드래그(엘리먼트 이동)가 완료된 후에 발생 (mouseup시 1회 발생. 뒤이어 handleup 발생)</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elArea</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">기준 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elHandle</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">옵션의 className으로 설정된 드래그 될 핸들 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrag</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">실제로 드래그 될 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">bInterupted</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
    

    

    <p class="description">드래그중 stopDragging() 호출로 강제적으로 드래그가 종료되었는지의 여부</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nX</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드래그 된 x좌표.</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nY</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">드래그 된 y좌표.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oDragArea.attach("dragEnd", function(oCustomEvent) {
    //~~
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_dragStart" class="event item">
	<h3>dragStart
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l398" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>드래그가 시작될 때 발생 (마우스 클릭 후 첫 움직일 때 한 번)</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elArea</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">기준 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elHandle</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">옵션의 className으로 설정된 드래그 될 핸들 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrag</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">실제로 드래그 될 엘리먼트</p>

	
	
    
</li>

<li class="param collapsed ">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">htDiff</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">handledown된 좌표와 dragstart된 좌표의 차이</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">nPageX</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">가로 좌표</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nPageY</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">세로 좌표</p>

	
	
    
</li>

        </ul>
    
</li>

<li class="param  ">
    
    
        <code class="name">weEvent</code>
        <span class="type">: jindo.$Event</span>
    

    

    <p class="description">mousedown시 발생되는 jindo.$Event 객체</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">stop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">beforedrag 이벤트를 발생시키지 않고 중단시킬때 호출</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oDragArea.attach("dragStart", function(oCustomEvent){
    // 뒤따르는 beforedrag 이벤트가 발생하지 않고 중단하고 싶은 경우
    oCustomEvent.stop();
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_handleDown" class="event item">
	<h3>handleDown
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l329" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>드래그될 handle 에 마우스가 클릭되었을 때 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elHandle</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">옵션의 className으로 설정된 드래그 될 핸들 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrag</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">실제로 드래그 될 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">weEvent</code>
        <span class="type">: jindo.$Event</span>
    

    

    <p class="description">mousedown시 발생되는 jindo.$Event 객체</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">stop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">dragStart 이벤트를 발생시키지 않고 중단시킬때 호출</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oDragArea.attach("handleDown", function(oCustomEvent){
    // 뒤따르는 dragStart 이벤트가 발생하지 않고 중단하고 싶은 경우
    oCustomEvent.stop();
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_handleUp" class="event item">
	<h3>handleUp
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DragArea.js.html#l570" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>드래그된 handle에 마우스 클릭이 해제됬을 때 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elHandle</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">옵션의 className으로 설정된 드래그 될 핸들 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDrag</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">실제로 드래그 될 엘리먼트</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">weEvent</code>
        <span class="type">: jindo.$Event</span>
    

    

    <p class="description">mousedown시 발생되는 jindo.$Event 객체</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// 커스텀 이벤트 핸들링 예제
oDragArea.attach("handleUp", function(oCustomEvent) {
    //~~
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	    </div>
    

    
        <div class="tc-panel">
			<h2 id="demo">데모</h2>
			<div class="demo">
				<ul class="demo_list" id="demo_list">
		            
		                <li><a href="../../../demo/jindo.DragArea/1. basic.html" id="demo_8be0657640d9d2d041a87a866a4157b2" title="가장&nbsp;기본적인&nbsp;사용&nbsp;예제입니다." target="_blank">기본&nbsp;예제</a></li>
		            
		                <li><a href="../../../demo/jindo.DragArea/2. flowout.html" id="demo_8b6a6508aa4c9d12750af8d7841cd013" title="드래그되는&nbsp;엘리먼트가&nbsp;상위&nbsp;박스영역을&nbsp;벗어날&nbsp;수&nbsp;없는&nbsp;예제입니다." target="_blank">상위&nbsp;영역을&nbsp;벗어날수&nbsp;없음</a></li>
		            
		                <li><a href="../../../demo/jindo.DragArea/3. setcapture.html" id="demo_91ee1cb91b01257e5cb1aea0f3a04c70" title="setCapture&nbsp;옵션&nbsp;사용에&nbsp;대한&nbsp;예제입니다." target="_blank">setCapture를&nbsp;사용하지&nbsp;않음</a></li>
		            
		                <li><a href="../../../demo/jindo.DragArea/4. threshold.html" id="demo_3d5f53ea95e13eb7e72829e6bd446b4f" title="일정&nbsp;시간이상&nbsp;잡고&nbsp;끌어야&nbsp;드래그되는&nbsp;예제입니다." target="_blank">일정이상&nbsp;잡고&nbsp;끌어야&nbsp;드래그시작</a></li>
		            
		                <li><a href="../../../demo/jindo.DragArea/5. grid.html" id="demo_6e65782df4ffa559b292688ff387111f" title="드래그중에&nbsp;좌표를&nbsp;계산하여&nbsp;상하좌우&nbsp;20px씩&nbsp;움직이도록&nbsp;한&nbsp;예제입니다." target="_blank">드래그&nbsp;중&nbsp;좌표를&nbsp;제어</a></li>
		            
		                <li><a href="../../../demo/jindo.DragArea/6. handle.html" id="demo_4b0696159686c846dfcf84dc7e8a6ce8" title="드래그가&nbsp;시작될때&nbsp;실제로&nbsp;드래그될&nbsp;대상을&nbsp;바꾸는&nbsp;예제입니다." target="_blank">제목표시줄&nbsp;드래그</a></li>
		            
		                <li><a href="../../../demo/jindo.DragArea/7. resize.html" id="demo_b86cfc36bc3fa9e11c9434be19ae3245" title="드래그가&nbsp;시작될때,&nbsp;실제로&nbsp;움직일&nbsp;대상의&nbsp;높이값을&nbsp;변경해서&nbsp;리사이즈&nbsp;효과를&nbsp;준&nbsp;예제입니다." target="_blank">리사이즈</a></li>
		            
	            </ul>
				<div class="demo_example" id="demo_example">
					<div class="clipboard" style="display:block">
						<p class="description" id="demo_desc"></p>
						<iframe src="about:blank" id="demo_iframe" name="demo_iframe" width="100%" height="366" frameborder="0"></iframe>
					</div>
				</div>
				<button type="button" id="btn_external" class="btn_external">새창으로 열기</button>
			</div>
        </div>
    
	    
	
	
	<div class="btn_top" id="btn_top">
		<a title="맨위로" href="#"><span class="blind">맨위로</span></a>
	</div>	

</div>
<!-- // content -->

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>